<template>
    <div class="LittleK">
        <div id="lchart" ref="chartDom" class="chart"></div>
        <div class="mask"></div>
    </div>
</template>

<script setup lang="ts">
import { get } from "@/comm/request";
import { URL_TOKEN_DATA } from "@/comm/api";
import { ref, reactive, toRefs, onMounted, onUnmounted, watch } from "vue";
import { useChart } from "@/hooks/useChart";
import { useRoute } from "vue-router";

const echarts = (window as any)["echarts"];
const chartDom = ref<any>(null);
const myChart = ref<any>(null);
const route = useRoute();
const valueList = ref<any>([]);
const dateList = ref<any>([]);
onMounted(() => {
    initChart();
    window.addEventListener("resize", chaertResize);
});
onUnmounted(() => {
    window.removeEventListener("resize", chaertResize);
});
const props = defineProps({
    percentage: {
        type: Number,
        default: 0
    },
    kline: {
        type: Array,
        default: () => []
    }
});
watch(
    () => props.percentage,
    (newVal, oldVal) => {
        if (newVal) {
            initChart();
        }
    }
);
watch(
    () => props.kline,
    (newVal, oldVal) => {
        if (newVal) {
            initChart();
        }
    }
);
function chaertResize() {
    if (myChart.value) {
        // console.log('图表卡片实例!!!!!!!!!!!!!!!!!!!!!!', myChart.value)
        myChart.value.resize();
        setTimeout(() => {
            myChart.value.resize();
        }, 200);
    }
}

function getData() {
    let list = props.kline;
    let datas = list.map((item: any) => {
        return {
            value: item.close,
            date: item.timestamp
        };
    });
    datas.sort((a: any, b: any) => {
        return a.date - b.date;
    });
    return datas;
}
async function initChart() {
    myChart.value = echarts.init(chartDom.value);
    const datas = getData();
    dateList.value = [];
    valueList.value = [];
    datas.forEach((item: any) => {
        dateList.value.push(item.date);
        valueList.value.push(item.value);
    });
    setChartOption();
}
function getChartClolr(type: number) {
    if (type == 1) {
        return props.percentage < 0 ? "#F6475D " : "#0DCB81";
    }
    if (type == 2) {
        if (props.percentage < 0) {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: "rgba(246, 71, 93, 0.29)"
                },
                {
                    offset: 1,
                    color: "rgba(246, 71, 93, 0.10)"
                }
            ]);
        } else {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: "rgba(13, 203, 129, 0.29)"
                },
                {
                    offset: 1,
                    color: "rgba(13, 203, 129, 0.10)"
                }
            ]);
        }
    }
}
function setChartOption() {
    // console.log('初始化echarts2===============>', datelist, serieslist)
    myChart.value.setOption({
        xAxis: [
            {
                show: false,
                data: dateList.value
            }
        ],
        yAxis: [
            {
                show: false
            }
        ],
        grid: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 0
        },
        series: [
            {
                showSymbol: false,
                type: "line",
                data: valueList.value,
                lineStyle: {
                    width: 2,
                    color: getChartClolr(1)
                },
                areaStyle: {
                    color: getChartClolr(2)
                }
            }
        ]
    });
}
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
